<template>
    <div class="doctor-management">
        <!-- 搜索结果栏 -->
        <div class="search-container">
            <el-input v-model="searchName" placeholder="输入医生姓名搜索" clearable @clear="searchDoctors"
                style="width: 300px; margin-right: 10px" />
            <el-button type="primary" @click="searchDoctors">查询</el-button>
        </div>

        <!-- 医生表格 -->
        <el-table :data="doctorList" border style="width: 100%" v-loading="loading">
            <el-table-column prop="userId" label="用户ID" width="120" />
            <el-table-column prop="doctorName" label="姓名" width="150" />
            <el-table-column prop="licenseNumber" label="执业编号" />
            <el-table-column prop="specialty" label="专业" />
            <el-table-column prop="hospital" label="所属医院" />

        </el-table>
    </div>
</template>

<script>
import { queryDoctorsByName, deleteUser } from '@/api/userManger';
import { ElMessage, ElMessageBox } from 'element-plus';
import { jwtDecode } from 'jwt-decode'; // 修正后的导入方式

export default {
    data() {
        return {
            searchName: '',
            doctorList: [],
            loading: false,
            deleteLoading: {} // 记录删除按钮的加载状态
        };
    },

    created() {
        this.fetchDoctors();
    },

    methods: {
        // 获取医生列表
        async fetchDoctors() {
            this.loading = true;
            try {
                const params = this.searchName ? { name: this.searchName } : null;
                const response = await queryDoctorsByName(params);
                this.doctorList = response.data || [];
            } catch (error) {
                ElMessage.error('获取医生列表失败');
            } finally {
                this.loading = false;
            }
        },

        // 搜索结果
        searchDoctors() {
            this.fetchDoctors();
        },

        
    }
};
</script>

<style scoped>
.doctor-management {
    padding: 20px;
}

.search-container {
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}
</style>